<template>
  <fixed-pagination>
    <div class="center">
      <el-button :disabled="!(detailInfo.verificationState === 0 && detailInfo.sealingState === 0)" type="primary" size="small" class="submit-btn" @click="toEdit">编辑</el-button>
      <el-button type="primary" size="small" class="submit-btn" @click="btnVerificate">核销</el-button>
      <el-button :disabled="!(detailInfo.verificationState === 0 && detailInfo.sealingState === 0)" type="danger" plain size="small" class="submit-btn" @click="deleteItem">删除</el-button>
      <el-button type="info" size="small" class="back-btn cancel-btn-style" @click="toBack">返回</el-button>
    </div>

    <el-dialog
      :visible.sync="writeOffDialog"
      :lock-scroll="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      :show-close="true"
      :class="{'global-mobile-dialog': showMobilePage}"
      class="enter-account-dialog medium-common-dialog-size"
      center>
      <VerificationDialog
        ref="verificationDialog"
        :write-off-dialog="writeOffDialog"
        :write-off-detail="writeOffDetail"
        :client-form-defalut="clientFormDefalut"
        is-single-write-off
        @handleFilterCurPayer="filterCurPayer"/>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="btnSubmit(false)">提交</el-button>
        <el-button type="info" class="cancel-btn-style" style="width: 80px" @click="writeOffDialog = false">取消</el-button>
      </span>
    </el-dialog>
  </fixed-pagination>
</template>

<script>
import ElMessage, { showModal } from '@/utils/message';
import { delFinance } from '@/api/finance';
import { mapState } from 'vuex';
import VerificationDialog from '@/components/verificationDialog';
import chargeOff from '@/views/finance/mixins/chargeOff';
export default {
  components: { VerificationDialog },
  mixins: [chargeOff],
  props: {
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    dayAccountId: {
      type: Number | String,
      default: ''
    }
  },
  data() {
    return {
      clientWidth: '',
      writeOffDialog: false,
      writeOffDetail: {},
      clientFormDefalut: {}
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  // 判断弹窗消失的时候清空验证
  watch: {
    writeOffDialog(val, oldVal) {
      const clientForm = this.$refs.verificationDialog;
      if (clientForm !== undefined && clientForm.$refs.clientForm !== undefined) {
        clientForm.$refs.clientForm.resetFields();
      }
    }
  },
  methods: {
    toBack() {
      this.$emit('toBack');
    },
    toEdit() {
      this.$router.push({
        name: 'editDayAccount',
        params: { dayAccountId: this.dayAccountId }
      });
    },
    deleteItem() {
      showModal('是否确定删除该流水单', '', {
        iconClass: 'del-icon'
      }).then(() => {
        delFinance(this.dayAccountId).then(res => {
          ElMessage.success('删除成功');
          this.toBack();
        }, result => {
          // this.$message.error(result.message);
        });
      }).catch(() => {
        return false;
      });
    },
    // 点击核销按钮
    btnVerificate(scope) {
      this.checkVerificate(true, this.dayAccountId);
    },
    // 查询同一付款人的多条非0流水
    filterCurPayer(info) {
      this.writeOffDialog = false;
      this.$router.push({
        name: 'dayAccount',
        query: {
          clientName: info.clientName,
          clientType: info.clientType,
          states: '0,2,3'
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.empty-btn-style {
  border-color: #406EFF;
  background: #fff;
  color: #406EFF;
}
.enter-account-dialog {
  & ::v-deep {

  .el-dialog {
    border-radius: 12px;
  }
  .el-dialog__body {
    padding: 16px 24px !important;
  }
  .el-dialog__footer {
    padding: 24px;
    padding-top: 0;
  }
  .dialog-footer {
    .el-button--primary {
      width: 120px;
      height: 32px;
      background: #406EFF;
      border-radius: 4px;
      font-size: 16px;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 7px;
    }
  }
  }
}
</style>
<style lang="scss">
@import '@/styles/placeholder.scss';
.el-message-box--center.charge-message-cancel .el-message-box__btns {
  @extend %el-message-box--center-el-message-box__btns !optional;
}
</style>
